<template>
	<view class="PageShow">
		<view>
			<u-notify ref="uNotify"></u-notify>
		</view>

		<view class="top">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list1" @change="changeTabs"></u-tabs>
			</u-sticky>
		</view>


		<view class="AutoRecShow" v-if="list1[0].viewFlag">
			<view class="InputTxtShow">
				<u--textarea v-model="autoRecTxt" placeholder="复制内容,自动识别并填入地址等信息,例如:xxxx小区1期1栋1单元1203号损失400元"
					placeholderStyle="color: #ff0000" maxlength=200 height=150 count></u--textarea>
			</view>
			<view class="AutoButtonShow">
				<u-button type="primary" text="解析" size="normal" @click="autoRecRoom"></u-button>
			</view>
		</view>

		<view id="room" v-if="list1[0].viewFlag" class="InfoMainShow">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="queryRoomInfo" :rules="rules" ref="uForm">
				<u-form-item label="城市(必填)" prop="queryRoomInfo.cityName" borderBottom @click="showCity = true"
					ref="item1" labelWidth="200rpx">
					<u--input v-model="queryRoomInfo.cityName" placeholderStyle="color: #ffa7ba" placeholder="请选择城市"
						border="none" readonly></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-action-sheet :show="showCity" :actions="actions" title="请选择城市" description=""
					@close="showCity = false" @select="citySelect">
				</u-action-sheet>


				<u-form-item label="小区(必填)" prop="queryRoomInfo.communityName" borderBottom ref="item2"
					labelWidth="200rpx">
					<u--input v-model="queryRoomInfo.communityName" placeholder="请输入小区名称" border="none"
						placeholderStyle="color: #ffa7ba"></u--input>
				</u-form-item>

				<u-form-item label="原因(必填)" prop="queryRoomInfo.description" borderBottom ref="item4"
					labelWidth="200rpx">
					<u--input v-model="queryRoomInfo.description" placeholder="不退押金" border="none" class="width=2200rpx"
						@focus="descriptionHandle" placeholderStyle='color: #ff0000; opacity:0.2'></u--input>
					<u-action-sheet :actions="descriptionList" :title="descriptionTitle" :show="showDescription"
						:closeOnClickOverlay="true" :closeOnClickAction="false" @select="selectClick"
						@close="closeDes"></u-action-sheet>
				</u-form-item>

				<u-form-item label="详细(非必填)" prop="queryRoomInfo.roomHolder" borderBottom ref="item6"
					labelWidth="200rpx">
					<u--textarea v-model="queryRoomInfo.roomHolder" placeholder="更多详细的描述信息"
						placeholderStyle="color: #ff0000" maxlength=200 height=150 count></u--textarea>
					<!-- <u--input v-model="" placeholder="" border="none"></u--input> -->
				</u-form-item>

				<u-form-item label="有力证据(非必填)" prop="queryRoomInfo.confirmInfoUrl" borderBottom ref="item6"
					labelWidth="200rpx">
					<view style="margin-left: 10rpx;">
						<u-upload :fileList="fileList1" @afterRead="afterRead1" @delete="deletePic1" name="pic1"
							multiple :maxCount="2" :maxSize=oversizeFile1 @oversize="oversize1"></u-upload>
					</view>
				</u-form-item>
				<u-form-item label="房间图片(非必填)" prop="queryRoomInfo.confirmInfoUrl" borderBottom ref="item7"
					labelWidth="200rpx">
					<view style="margin-left: 10rpx;">
						<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="pic2"
							multiple :maxCount="2" :maxSize=oversizeFile2 @oversize="oversize2"></u-upload>
					</view>
				</u-form-item>

				<view>
					<u-row customStyle="">
						<u-col span="6">
							<view class="">
								<u-form-item label="期数(非必填)" prop="queryRoomInfo.termNo" borderBottom ref="item3"
									labelWidth="200rpx">
									<u--input v-model="queryRoomInfo.termNo" placeholder="期数" border="none"
										type="digit"></u--input>
									<u--text text="期" size="30" align="center"></u--text>
								</u-form-item>
							</view>
						</u-col>
						<u-col span="6">
							<view class="">
								<u-form-item label="单元(非必填)" prop="queryRoomInfo.cellNo" borderBottom ref="item2"
									labelWidth="200rpx">
									<u--input v-model="queryRoomInfo.cellNo" placeholder="单元" border="none"
										type="digit"></u--input>
									<u--text text="单元" size="30" align="center"></u--text>
								</u-form-item>

							</view>
						</u-col>
					</u-row>
				</view>

				<u-row customStyle="">
					<u-col span="6">
						<view class="">
							<u-form-item label="楼栋(非必填)" prop="queryRoomInfo.dongNo" borderBottom ref="item2"
								labelWidth="200rpx">
								<u--input v-model="queryRoomInfo.dongNo" placeholder="楼栋号" border="none"
									type="digit"></u--input>
								<u--text text="栋" size="30" align="center"></u--text>
							</u-form-item>
						</view>
					</u-col>
					<u-col span="6">
						<view class="">
							<u-form-item label="损失(非必填)" prop="queryRoomInfo.lossMoney" borderBottom ref="item5"
								labelWidth="200rpx">
								<u--input v-model="queryRoomInfo.lossMoney" placeholder="金额" border="none"></u--input>
								<u--text text="元" size="30" align="center"></u--text>
							</u-form-item>
						</view>
					</u-col>
				</u-row>

				<u-row customStyle="">
					<u-col span="6">
						<view class="">
							<u-form-item label="房号(非必填)" prop="queryRoomInfo.roomName" borderBottom ref="item2"
								labelWidth="200rpx">
								<u--input v-model="queryRoomInfo.roomName" placeholder="房间号" border="none"></u--input>
							</u-form-item>
						</view>
					</u-col>
					<u-col span="6">
						<view class="">
							<u-form-item label="提供者(非必填)" prop="user.userId" borderBottom ref="item2"
								labelWidth="200rpx">
								<u--input v-model="user.nickName" placeholder="用户ID" border="none" disabled></u--input>
							</u-form-item>
						</view>
					</u-col>
				</u-row>
			</u--form>

			<view style="padding: 10rpx; width: 200rpx; margin-left: 34%;">
				<u-button type="primary" text="确认" size="normal" @click="createInfo"></u-button>
			</view>

			<u-line color="#2979ff"></u-line>


		</view>
		<view id="company" v-if="list1[1].viewFlag">
			<u--form labelPosition="left" :model="queryCompanyInfo" :rules="rules" ref="uForm">
				<u-form-item label="城市(必填)" prop="queryCompanyInfo.cityName" borderBottom
					@click="showCompanyCity = true" ref="item20" labelWidth="200rpx">
					<u--input v-model="queryCompanyInfo.cityName" placeholderStyle="color: #ffa7ba" placeholder="请选择城市"
						border="none" readonly></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-action-sheet :show="showCompanyCity" :actions="actions" title="请选择城市" description=""
					@close="showCompanyCity = false" @select="cityCompanySelect">
				</u-action-sheet>

				<u-form-item label="区(必填)" prop="queryCompanyInfo.quName" borderBottom @click="showCompanyQu = true"
					ref="item21" labelWidth="200rpx">
					<u--input v-model="queryCompanyInfo.quName" placeholderStyle="color: #ffa7ba" placeholder="请选择区"
						border="none" readonly></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-action-sheet :show="showCompanyQu" :actions="quActions" title="请选择区" description=""
					@close="showCompanyQu = false" @select="quCompanySelect">
				</u-action-sheet>


				<u-form-item label="名称(必填)" prop="queryCompanyInfo.companyName" borderBottom ref="item0"
					labelWidth="200rpx">
					<u--input v-model="queryCompanyInfo.companyName" placeholder="中介/公司名称" border="none"></u--input>
				</u-form-item>
				<u-form-item label="所在地址" prop="queryCompanyInfo.addr" borderBottom ref="item1" labelWidth="200rpx">
					<u--input v-model="queryCompanyInfo.addr" placeholder="详细地址" border="none"></u--input>
				</u-form-item>
				<u-form-item label="描述" prop="queryCompanyInfo.description" borderBottom ref="item2" labelWidth="200rpx">
					<u--input v-model="queryCompanyInfo.description" placeholder="描述" border="none"></u--input>
				</u-form-item>
				<u-form-item label="损失" prop="queryCompanyInfo.money" borderBottom ref="item3" labelWidth="200rpx">
					<u--input v-model="queryCompanyInfo.money" placeholder="金额" border="none"></u--input>
				</u-form-item>
				<u-form-item label="小区" prop="queryCompanyInfo.communityName" borderBottom ref="item4"
					labelWidth="200rpx">
					<u--input v-model="queryCompanyInfo.communityName" placeholder="小区名称" border="none"></u--input>
				</u-form-item>

				<u-col span="mine-actions grid col-1 text-center">
					<view class="">
						<u-form-item label="提供者" prop="user.userId" borderBottom ref="item2"
							labelWidth="200rpx">
							<u--input v-model="user.nickName" placeholder="用户名称" border="none" disabled></u--input>
						</u-form-item>
					</view>
				</u-col>
			</u--form>

			<view style="padding: 10rpx; width: 200rpx; margin-left: 34%;">
				<u-button type="primary" text="确认" size="normal" @click="createCompanyInfo"></u-button>
			</view>
		</view>

	</view>



</template>

<script>
	import {
		createRoom,
		createZjRoom,
		queryRoom,
		autoRecRoom,
	} from '@/api/room/room.js'
	import {
		getUserProfile
	} from '@/api/system/user.js'
	import {
		upload
	} from '@/utils/upload.js'
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'

	export default {
		data() {
			return {
				autoRecTxt: "",
				showRoomInfo: false,
				uploadUrl: config.baseUrl + "/room/data/upload",
				fileList: [],
				fileList1: [],
				fileList2: [],
				uploadFilesFlag: false,
				descriptionTitle: "请选择原因（多选）",
				showDescription: false,
				descriptionChoose: [],
				descriptionList: [{
						name: '恶意扣押金',
						subname: "找理由扣押金",
						color: '#000000',
						fontSize: '25',
						disabled: false,
						loading: false
					},
					{
						name: '器材老旧',
						subname: "不愿意更换器材",
						color: '#000000',
						fontSize: '25',
						disabled: false,
						loading: false
					},
					{
						name: '态度恶劣',
						subname: "辱骂等素质问题",
						color: '#000000',
						fontSize: '25',
						disabled: false,
						loading: false
					},
					{
						name: '乱收其他费用',
						subname: "私搭水电或者乱收费",
						color: '#000000',
						fontSize: '25',
						disabled: false,
						loading: false
					},
					{
						name: '黑中介房源',
						subname: "黑中介房源",
						color: '#000000',
						fontSize: '25',
						disabled: false,
						loading: false
					},
					{
						name: '安全问题',
						subname: "甲醛或其他安全风险",
						color: '#000000',
						fontSize: '25',
						disabled: false,
						loading: false
					},
					{
						name: '其他',
						subname: "其他问题",
						color: '#000000',
						fontSize: '25',
						disabled: false,
						loading: false
					},
				],
				showNotify: true,
				user: this.$store.state.user,
				list1: [{
						name: '收录黑房东',
						current: '0',
						viewFlag: true
					}, {name: '收录黑中介',
						current: '1',
						viewFlag: false}
					// ,{
					// 	name: '黑中介/公司名单',
					// 	current: '1',
					// 	viewFlag: false
					// }, 
				],
				showCity: false,
				showCompanyCity: false,
				showCompanyQu: false,
				switchVal: false,
				queryCompanyInfo: {
					communityName: '',
					cityName: '',
					companyName: '',
					lossMoney: '',
					description: '',
					quName: '',
					addr: ''

				},
				queryRoomInfo: {
					userId: '',
					cityName: '',
					communityName: '',
					termNo: '', // 期数
					dongNo: '', // 楼栋号
					cellNo: '', // 单元号
					roomName: '',
					description: '',
					lossMoney: '',
					roomHolder: '',
					confirmInfoUrl: '',
					limit: 10,
					page: 0,
				},
				roomInfoEmpty: {
					userId: '',
					cityName: '',
					communityName: '',
					termNo: '', // 期数
					dongNo: '', // 楼栋号
					cellNo: '', // 单元号
					roomName: '',
					description: '',
					lossMoney: '',
					roomHolder: '',
					confirmInfoUrl: '',
					limit: 10,
					page: 0,
				},
				roomList: [{
					userId: '',
					cityName: '',
					communityName: '',
					roomName: '',
					description: '',
					lossMoney: '',
					roomHolder: '',
					confirmInfoUrl: '',
				}, ],
				actions: [{
					name: '成都',
				}],
				quActions: [{
						name: '天府新区',
						fontSize: '20'
					},
					{
						name: '武侯区',
						fontSize: '20'
					},
					{
						name: '高新区',
						fontSize: '20'
					},
					{
						name: '锦江区',
						fontSize: '20'
					},
					{
						name: '青羊区',
						fontSize: '20'
					},
					{
						name: '成华区',
						fontSize: '20'
					},
					{
						name: '金牛区',
						fontSize: '20'
					},
					{
						name: '双流区',
						fontSize: '20'
					},
					{
						name: '龙泉驿区',
						fontSize: '20'
					}, {
						name: '温江区',
						fontSize: '20'
					}, {
						name: '郫都区',
						fontSize: '20'
					}, {
						name: '新都区',
						fontSize: '20'
					}, {
						name: '双流区',
						fontSize: '20'
					},
				],
				oversizeFile1: 300000,
				oversizeFile2: 300000,
				rules: {
					// 'userInfo.name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.sex': {
					// 	type: 'string',
					// 	max: 1,
					// 	required: true,
					// 	message: '请选择男或女',
					// 	trigger: ['blur', 'change']
					// },
				},

			}
		},
		onLoad() {
			this.getUser()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)

		},
		methods: {
			changeTabs(indexTab) {
				let index = indexTab.current
				for (var i = 0; i < this.list1.length; i++) {
					if (index == i) {
						this.list1[i].viewFlag = true
					} else {
						this.list1[i].viewFlag = false
					}
				}
			},
			deletePic1(event) {
				this.fileList1.splice(event.index, 1)
			},
			async afterRead1(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.info(event.name, this.fileList1)
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
			},
			oversize1() {
				this.$refs.uNotify.show({
					top: 100,
					type: 'error',
					message: "上传文件大于" + this.oversizeFile1 / 1000 / 1000 + "M",
					duration: 1000 * 1.5,
					fontSize: 30,
					safeAreaInsetTop: true
				})

			},
			deletePic2(event) {
				this.fileList2.splice(event.index, 1)
			},
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.info(event.name, this.fileList2)
				let lists = [].concat(event.file)
				let fileListLen = this.fileList2.length
				lists.map((item) => {
					this.fileList2.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
			},
			oversize2() {
				this.$refs.uNotify.show({
					top: 100,
					type: 'error',
					message: "上传文件大于" + this.oversizeFile2 / 1000 / 1000 + "M",
					duration: 1000 * 1.5,
					fontSize: 30,
					safeAreaInsetTop: true
				})

			},
			uploadFilePromise(file, userId, roomId) {
				console.log("发起上传file:", file)
				upload({
					url: "/room/data/upload",
					filePath: file.url,
					name: file.name,
					formData: {
						userId: userId,
						roomId: roomId,
						fileName: file.name,
						fileSize: file.size
					}
				}).then(reponse => {
					if (reponse.code != 200) {
						this.$refs.uNotify.show({
							top: 100,
							type: 'error',
							message: resonse.msg,
							duration: 1000 * 1.5,
							fontSize: 30,
							safeAreaInsetTop: true
						})
					}
				})
			},
			clearChoose() {
				for (var i = 0; i < this.descriptionList.length; i++) {
					this.descriptionList[i].color = '#000000'
				}
			},
			descriptionHandle() {
				this.showDescription = true
			},
			selectClick(chooseItem) {
				console.log("reponse：" + chooseItem.name)
				if (chooseItem.color == '#ff0000') {
					chooseItem.color = '#000000'
					this.descriptionChoose.pop(chooseItem.name)
				} else {
					chooseItem.color = '#ff0000'
					this.descriptionChoose.push(chooseItem.name)
				}
				console.log("reponse ：" + this.descriptionChoose)

			},
			closeDes() {
				this.queryRoomInfo.description = ""
				this.showDescription = false
				for (let itemIndex in this.descriptionChoose) {
					this.queryRoomInfo.description += this.descriptionChoose[itemIndex] + ";"
				}
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.roleGroup = response.roleGroup
					this.postGroup = response.postGroup
				})
			},
			citySelect(e) {
				this.queryRoomInfo.cityName = e.name
				this.$refs.uForm.validateField('queryRoomInfo.cityName')
			},
			cityCompanySelect(e) {
				this.queryCompanyInfo.cityName = e.name
				this.$refs.uForm.validateField('queryCompanyInfo.cityName')
			},
			quCompanySelect(e) {
				this.queryCompanyInfo.quName = e.name
				this.$refs.uForm.validateField('queryCompanyInfo.quName')
			},

			autoRecRoom() {
				autoRecRoom({
					autoRecTxt: this.autoRecTxt,
				}).then(reponse => {
					console.log("reponse：", reponse)
					if (reponse.code == 200) {
						if (null != reponse.data) {
							this.queryRoomInfo = reponse.data
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								// color: '#000',
								// bgColor: '#e8e8e8',
								message: '自动解析失败，请手动操作',
								duration: 1000 * 3,
								fontSize: 40,
								safeAreaInsetTop: true
							})
						}
					}
				})
			},

			createCompanyInfo() {
				if (this.queryCompanyInfo.companyName == "") {
					this.$refs.uNotify.show({
						top: 100,
						type: 'error',
						message: '公司为必填项',
						duration: 1000 * 1.5,
						fontSize: 30,
						safeAreaInsetTop: true
					})
					return
				}
				
				this.queryCompanyInfo.userId = this.user.userId
				createZjRoom(this.queryCompanyInfo).then(reponse => {
					console.log("reponse：", reponse)
					if (reponse.code == 200) {
						this.$refs.uNotify.show({
							top: 10,
							type: 'success',
							// color: '#000',
							// bgColor: '#e8e8e8',
							message: '信息开始审核',
							duration: 1000 * 3,
							fontSize: 40,
							safeAreaInsetTop: true
						})
					}
				})
				this.queryCompanyInfo = {}
				
				return
			},
			async createInfo() {
				if (this.queryRoomInfo.cityName == "") {
					this.$refs.uNotify.show({
						top: 100,
						type: 'error',
						message: '城市为必填项',
						duration: 1000 * 1.5,
						fontSize: 30,
						safeAreaInsetTop: true
					})
					return
				}

				if (this.queryRoomInfo.communityName == "") {
					this.$refs.uNotify.show({
						top: 100,
						type: 'error',
						message: '小区为必填项',
						duration: 1000 * 1.5,
						fontSize: 30,
						safeAreaInsetTop: true
					})
					return
				}

				if (this.queryRoomInfo.userId == "" || this.queryRoomInfo.userId == null) {
					this.$refs.uNotify.show({
						top: 10,
						type: 'warn',
						message: '没有登录无法获取积分',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}
				this.queryRoomInfo.userId = this.user.userId
				createRoom(this.queryRoomInfo).then(reponse => {
					console.log("reponse：", reponse)
					if (reponse.code == 200) {
						let roomId = reponse.data.roomId
						console.info("上传file1:", this.fileList1, "上传file2:", this.fileList2)
						this.fileList = this.fileList1.concat(this.fileList2)
						console.info("上传file:", this.fileList, "userId:", this.user.userId, "roomId:", roomId)
						for (let i = 0; i < this.fileList.length; i++) {
							setTimeout(() => {
								console.log(Date.now())
								const result = this.uploadFilePromise(this.fileList[i], this.user
									.userId, roomId)
								let item = this.fileList[i]
								this.fileList.splice(i, 1, Object.assign(item, {
									status: 'success',
									message: '',
									url: result
								}))
							}, i * 500)
						}

						this.$refs.uNotify.show({
							top: 10,
							type: 'success',
							// color: '#000',
							// bgColor: '#e8e8e8',
							message: '信息开始审核',
							duration: 1000 * 3,
							fontSize: 40,
							safeAreaInsetTop: true
						})
					}
				})
				this.queryRoomInfo = this.roomInfoEmpty
				this.clearChoose()
				this.descriptionChoose = []
				this.uploadFilesFlag = false
				setTimeout(() => {
					this.fileList = this.fileList.filter(item => {
						item.status !== 'success'
					})
					this.fileList1 = this.fileList1.filter(item => {
						item.status !== 'success'
					})
					this.fileList2 = this.fileList2.filter(item => {
						item.status !== 'success'
					})
				}, 5 * 1000)
			},

		}
	}
</script>

<style lang="scss">
	.PageShow {
		display: inline-block;
		position: relative;
		text-align: center;

		.AutoRecShow {
			position: relative;
			display: inline-block;
			width: 95%;
			height: 300rpx;
			text-align: center;

			.InputTxtShow {}

			.AutoButtonShow {
				margin-top: 10rpx;
				width: 30%;
				margin-left: 34%;
			}
		}

		.InfoMainShow {
			position: relative;
			width: 95%;
			display: inline-block;
		}
	}
</style>